import dynamic from 'next/dynamic';
import { useState } from 'react';
import { Divider } from 'antd'

// import ListItem from '@/components/listItem';
import { prepareConnection } from '@/db';
import { Article } from '@/db/entity';

import { IArticle } from './api';

interface IProps {
  articles: IArticle[];
}

const DynamicComponent = dynamic(() => import('@/components/listItem'));

export async function getServerSideProps() {
  const db = await prepareConnection();
  const articles = await db.getRepository(Article).find({
    relations: ['user'], // 不仅返回 article 信息还返回相关联的 user 信息
  });

  return {
    props: {
      articles: JSON.parse(JSON.stringify(articles)) || [],
    },
  };
}

const Home = (props: IProps) => {
  const { articles = [] } = props;
  const [showAriticle] = useState([...articles]);

  return (
    <div className='content-layout'>
      {
        showAriticle.map((article) => (
          <div key={article.id}>
            <DynamicComponent  {...{ article }} />
            <Divider />
          </div>
        ))
      }
    </div>
  );
};

export default Home;
